<template>
  <el-container>
    <vHeadSpace />
    <el-container>
      <vAsideSpace />
      <el-container>
        <el-main class="main">
          <div class="content">
            <el-row :gutter="40" style="height: 40px;">
              <el-col :span="16" style="height: 40px;">
                <label style="font-weight: normal;font-size:14px">查询设备:</label>
                <el-input v-model="queryString" placeholder="设备名称或IP" size="small" style="width: 150px;margin-left: 5px;margin-right: 5px;margin-top: 12px;" class="filter-item" />
                <label style="font-weight: normal;font-size:14px">服务器/网络设备:</label>
                <el-select v-model="hostType"  placeholder="请选择" size="small" style="width:150px;margin-top:12px;margin-left: 5px;margin-right: 5px;">
                  <el-option label="全部设备类型" value="0"></el-option>
                  <el-option label="服务器" value="1"></el-option>
                  <el-option label="网络设备" value="2"></el-option>
                </el-select>
                <label style="font-weight: normal;font-size:14px">可用/不可用:</label>
                <el-select v-model="availChoose" placeholder="请选择" size="small" style="width:150px;margin-top: 12px;margin-left: 5px;margin-right: 5px;">
                  <el-option label="全部设备状态" value="0"></el-option>
                  <el-option label="可用" value="1"></el-option>
                  <el-option label="不可用" value="2"></el-option>
                </el-select>
                <el-button type="primary" size="small" style="margin-left:5px" @click="filterClick()">点击查询</el-button>
              </el-col>
              <el-col :span="5" style="float: right;margin-top: 12px;">
                <el-button type="primary" size="small" @click="handleCreate()" style="float: right;margin-left: 8px">添加设备</el-button>
                <el-button type="primary" size="small" @click="handleNetworkSearch()" style="float: right;margin-left: 8px">发现设备</el-button>
                <!--<el-button type="primary" size="small" @click="hanldMulCreate()">批量添加</el-button>-->
              </el-col>
            </el-row>
            <el-row align="center" style="margin-top: 10px">
              <el-table v-loading="loading" :data="dataList" :row-style="{height: '52px'}" stripe style="width: 100%" :height="tableHeight" :cell-style="{padding: '0'}">
                <el-table-column type="index" align="center" label="序号" width="70" fixed :index="indexMethod" />
                <el-table-column prop="host" label="设备名称"  align="center" fixed />
                <el-table-column prop="hostIP" label="IP地址"  align="center" fixed />
                <el-table-column
                        label="设备类型"
                        align="center"
                        width="310">
                  <!--                          :filters="[{value: '主机', text: '服务器'},{value: '网络设备', text: '网络设备'}]"-->
                  <!--                          :filter-method="TypefilterHandler"-->
                  <!--                          width="300">-->
                  <template slot-scope="scope">
                    <div class="itemInfo-middle-type">
                      <el-tooltip :disabled="scope.row.available !== '2'" effect="light" :content="timeoutTip(scope.row)" placement="bottom-start">
                        <div :class="ifAgentAvail(scope.row)">服务器</div>
                      </el-tooltip>
                      <el-tooltip :disabled="scope.row.snmp_available !== '2'" effect="light" :content="timeoutTip(scope.row)" placement="bottom-start">
                        <div :class="ifSwitchAvail(scope.row)">交换机</div>
                      </el-tooltip>
                      <el-tooltip :disabled="scope.row.snmp_available !== '2'" effect="light" :content="timeoutTip(scope.row)" placement="bottom-start">
                        <div :class="ifFirewallAvail(scope.row)">防火墙</div>
                      </el-tooltip>
                      <el-tooltip :disabled="scope.row.snmp_available !== '2'" effect="light" :content="timeoutTip(scope.row)" placement="bottom-start">
                        <div  :class="ifSinglegateAvail(scope.row)" class="itemInfo-middle-type-last">单向网闸</div>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                        label="设备状态"
                        width="100">
                  <template slot-scope="scope">
                    <el-tag size="mini"
                            :type="scope.row.available === '1' || scope.row.snmp_available ==='1' || scope.row.ipmi_available ==='1' || scope.row.jmx_available ==='1' ? 'success' : 'danger' " >
                      {{scope.row.available === '1' || scope.row.snmp_available ==='1' || scope.row.ipmi_available ==='1' || scope.row.jmx_available ==='1' ?'可\u2003用':'不可用'}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="itemsSize" label="监控项" width="100" align="center">
                  <template slot-scope="scope">
                    <div class="buttonText">
                      <router-link :to="{name:'ItemInfo', query: {'hostid': scope.row.hostid, 'host': scope.row.host, 'cur_type': isType(scope.row)} }">
                        监控项&nbsp;
                        <!--                <span style="font-style: italic">{{ scope.row.itemCount }}</span>-->
                      </router-link>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="itemsSize" label="告警项" width="100" align="center">
                  <template slot-scope="scope">
                    <div class="buttonText">
                      <router-link :to="{name:'TriggerSetting', query: {'hostid': scope.row.hostid, 'host': scope.row.host, 'cur_type': isType(scope.row)} }">
                        告警项&nbsp;
                        <!--                <span style="font-style: italic">{{ scope.row.itemCount }}</span>-->
                      </router-link>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="100">
                  <template slot-scope="scope">
                    <!--            <el-button size="mini" type="info" icon="el-icon-switch-button" @click="shutdownHost(scope.row.hostid)">关闭</el-button>-->
                    <!--            <el-button size="mini" type="warning" icon="el-icon-refresh-left" @click="restartHost(scope.row.hostid)">重启</el-button>-->
                    <el-button  type="primary" size="mini" icon="el-icon-edit" @click="prepareEdit(scope.row.hostid, isType(scope.row))">修改</el-button>
                    <el-button  type="danger" size="mini" icon="el-icon-delete" @click="promptDelete(scope.row.hostid, scope.row.host)">删除</el-button>
                    <!--            <el-button  type="warning" icon="el-icon-delete" @click="info(scope.row)">点击</el-button>-->
                  </template>
                </el-table-column>
              </el-table>
              <!--:page-size="pageSize"-->
              <el-pagination
                      :current-page="currentPage"
                      :page-sizes="[7,10,15,20]"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total"
                      @current-change="handleCurrentChange"
                      @size-change="handleSizeChange"
                      style="text-align: center"
              />
            </el-row>
            <!-- 新增标签弹层 -->
            <div class="add-form">
              <el-dialog title="新增设备"  :visible.sync="dialogFormVisible" v-if="dialogFormVisible" width="1000px">
                <el-form :model="formData" :rules="rules" ref="formData" label-width="100px">

                  <!--设备操作的用户名与密码: 类型判断为'1'即服务器类型，才弹出此填写框-->
                  <el-row :gutter="4" v-if="formData.type === '1'">
                    <el-col :span="8">
                      <el-form-item label="用户名" prop="username" >
                        <el-input v-model="formData.username" placeholder="设备的操作用户"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="密码" prop="password">
                        <el-input v-model="formData.password" placeholder="设备的操作密码"/>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <!--设备名-->
                  <el-row :gutter="4">
                    <el-col :span="8">
                      <el-form-item label="设备名称" prop="host">
                        <el-input v-model="formData.host"  placeholder="全局唯一，不可重复"/>
                      </el-form-item>
                    </el-col>
                    <!--          <el-col :span="8">-->
                    <!--            <el-form-item label="设备型号" prop="hostType">-->
                    <!--              <el-input v-model="formData.hostType" />-->
                    <!--            </el-form-item>-->
                    <!--          </el-col>-->
                    <el-col :span="8">
                      <el-form-item label="设备类型" prop="type">
                        <!--多选加上multitude-->
                        <el-select v-model="formData.type" @change="isShowInfo" placeholder="请选择">
                          <el-option label="服务器" value="1" ></el-option>
                          <el-option label="交换机" value="2" ></el-option>
                          <el-option label="防火墙" value="3" ></el-option>
                          <el-option label="单向网闸" value="4" ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <!--接口-->
                  <el-row :gutter="5">
                    <!--            <el-col :span="8">-->
                    <!--              <el-form-item label="设备类型" prop="type">-->
                    <!--                &lt;!&ndash;多选加上multitude&ndash;&gt;-->
                    <!--                <el-select v-model="formData.type" @change="isShowInfo" placeholder="请选择">-->
                    <!--                  <el-option label="服务器" value="1" ></el-option>-->
                    <!--                  <el-option label="交换机" value="2" ></el-option>-->
                    <!--                  <el-option label="防火墙" value="3" ></el-option>-->
                    <!--                  <el-option label="单向网闸" value="4" ></el-option>-->
                    <!--                </el-select>-->
                    <!--              </el-form-item>-->
                    <!--            </el-col>-->
                    <!--            <el-col :span="8">-->
                    <!--              <el-form-item label="CPU型号" prop="cpuType">-->
                    <!--                <el-select v-model="formData.cpuType" placeholder="请选择">-->
                    <!--                  <el-option label="酷睿i9" value="酷睿i9" ></el-option>-->
                    <!--                  <el-option label="酷睿i7" value="酷睿i7" ></el-option>-->
                    <!--                  <el-option label="酷睿i5" value="酷睿i5" ></el-option>-->
                    <!--                  <el-option label="Ryzen Threadripper" value="Ryzen Threadripper" ></el-option>-->
                    <!--                  <el-option label="Ryzen 9" value="Ryzen 9" ></el-option>-->
                    <!--                  <el-option label="Ryzen 7" value="Ryzen 7" ></el-option>-->
                    <!--                  <el-option label="Ryzen 5" value="Ryzen 5" ></el-option>-->
                    <!--                </el-select>-->
                    <!--              </el-form-item>-->
                    <!--            </el-col>-->
                  </el-row>
                  <!--          &lt;!&ndash; 是否使用批量添加 &ndash;&gt;-->
                  <!--          <el-form-item label="批量添加">-->
                  <!--            <el-checkbox style="float: left" :checked="false" true-label="1" false-label="0"></el-checkbox>-->
                  <!--          </el-form-item>-->
                  <!--agent-->
                  <el-row :gutter="2">
                    <el-col :span="8">
                      <el-form-item label="ip地址" prop="ip">
                        <el-input v-model="formData.ip"/>
                      </el-form-item>
                    </el-col>
                    <!--              <el-col :span="8">-->
                    <!--                <el-form-item label="DNS名称" prop="dns">-->
                    <!--                  <el-input v-model="formData.dns"/>-->
                    <!--                </el-form-item>-->
                    <!--              </el-col>-->
                    <el-col :span="8">
                      <el-form-item label="端口" prop="port" >
                        <el-input v-model="formData.port" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <!--                <el-col :span="5" style="margin-right: 120px">-->
                    <!--                <el-form-item label="连接到" prop="useip">-->
                    <!--                  <el-radio-group v-model="formData.useip">-->
                    <!--                    <el-radio-button label="IP" value="1" style="width:40px;height:40px"></el-radio-button>-->
                    <!--                    <el-radio-button label="DNS" value="0" style="width:40px;height:40px"></el-radio-button>-->
                    <!--                  </el-radio-group>-->
                    <!--                </el-form-item>-->
                    <!--              </el-col>-->
                    <!--              <el-col :span="8">-->
                    <!--                <el-form-item label="端口" prop="port">-->
                    <!--                  <el-input v-model="formData.port"/>-->
                    <!--                </el-form-item>-->
                    <!--              </el-col>-->
                  </el-row>
                  <!--agentSystemType(linux or windows)-->
                  <div v-if="!snmpIsShow">
                    <el-row :gutter="4">
                      <el-col :span="8">
                        <el-form-item label="系统" prop="systemType">
                          <el-select v-model="formData.systemType">
                            <el-option value="1" label="Linux" />
                            <el-option value="2" label="Windows"/>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <!--              <el-col :span="8">-->
                      <!--                <el-form-item label="内存" prop="memory">-->
                      <!--                  <el-select v-model="formData.memory">-->
                      <!--                    <el-option value="英伟达" label="英伟达"/>-->
                      <!--                    <el-option value="影驰" label="影驰"/>-->
                      <!--                    <el-option value="金士顿" label="金士顿"/>-->
                      <!--                    <el-option value="三星" label="三星"/>-->
                      <!--                    <el-option value="惠普" label="惠普"/>-->
                      <!--                  </el-select>-->
                      <!--                </el-form-item>-->
                      <!--              </el-col>-->
                    </el-row>
                  </div>
                  <!--SNMP-->
                  <div v-if="snmpIsShow">
                    <el-row>
                      <el-col :span="7">
                        <el-form-item label="SNMP版本" prop="version">
                          <el-select v-model="formData.version" style="width: 200px">
                            <el-option value="1" label="SNMPv1" />
                            <el-option value="2" label="SNMPv2" />
                            <el-option value="3" label="SNMPv3" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="13">
                        <el-form-item label="SNMP社区" prop="community">
                          <el-input v-model="formData.community"  style="width: 400px" />
                        </el-form-item>
                      </el-col>
<!--                      <el-col :span="4">-->
<!--                        <el-checkbox label="使用大量请求" name="bulk" v-model="formData.bulk" :checked="true" true-label="1" false-label="0"></el-checkbox>-->
<!--                      </el-col>-->
                    </el-row>
                  </div>
                  <!--设备群组-->
                  <!--          <el-row>-->
                  <!--            <el-col :span="7">-->
                  <!--              <el-form-item label="设备群组" prop="groupIds">-->
                  <!--                <el-select v-model="formData.groupIds" multiple placeholder="请选择" style="width: 200px">-->
                  <!--                  <el-option-->
                  <!--                      v-for="item in groupOptions"-->
                  <!--                      :key="item.groupid"-->
                  <!--                      :label="item.name"-->
                  <!--                      :value="item.groupid"-->
                  <!--                  />-->
                  <!--                </el-select>-->
                  <!--              </el-form-item>-->
                  <!--            </el-col>-->
                  <!--          </el-row>-->
                  <!--          &lt;!&ndash;templates&ndash;&gt;-->
                  <!--          <el-row>-->
                  <!--            <el-col :span="7">-->
                  <!--              <el-form-item label="模板" prop="templateIds">-->
                  <!--                <el-select v-model="formData.templateIds" multiple placeholder="请选择" style="width: 200px">-->
                  <!--                  <el-option-->
                  <!--                      v-for="item in templateOptions"-->
                  <!--                      :key="item.templateid"-->
                  <!--                      :label="item.host"-->
                  <!--                      :value="item.templateid"-->
                  <!--                  />-->
                  <!--                </el-select>-->
                  <!--              </el-form-item>-->
                  <!--            </el-col>-->
                  <!--          </el-row>-->
                  <!--描述信息-->
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="描述信息" prop="description">
                        <el-input v-model="formData.description" type="textarea" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false,isSearching=false">取消</el-button>
                  <el-button type="primary" @click="handleAdd('formData')" :disabled="isSearching">确定</el-button>
                </div>
              </el-dialog>
            </div>
            <!-- 修改设备弹窗 -->
            <div class="modify-form">
              <el-dialog title="修改设备" :visible.sync="modifyFormVisible" width="1000px">
                <el-tabs v-model="activeName" type="card" >
                  <el-tab-pane label="用户信息管理" name="first" v-if="this.formData.type == '1'">
                    <el-form :model="userInfo" :rules="rules" ref="userInfo" label-width="100px">
                      <el-row>
                        <el-col :span="8">
                          <el-form-item label="用户名" prop="userName" >
                            <el-input v-model="userInfo.userName" placeholder="设备的操作用户"/>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8">
                          <el-form-item label="密码" prop="password">
                           <!-- <el-input v-model="userInfo.password" show-password placeholder="设备的操作密码"/> -->
                            <el-input v-model="userInfo.password" :type="showType" placeholder="设备的操作密码"/>
                            <img v-show="!flags" @click="flags = !flags" class="eye" src="../assets/img/biyan.png" alt="">
                            <img v-show="flags" @click="flags = !flags" class="eye" src="../assets/img/zhengyan.png" alt="">
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form>
                  </el-tab-pane>
                  <el-tab-pane label="设备信息管理" name="second" >
                    <el-form :model="formData" :rules="rules" ref="formData" label-width="100px">

                      <!--设备名-->
                      <el-row :gutter="4">
                        <el-col :span="8">
                          <el-form-item label="设备名称" prop="host">
                            <el-input v-model="formData.host" disabled />
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="设备类型" prop="type">
                            <!--多选加上multitude-->
                            <el-select v-model="formData.type"  @change="isShowInfo" disabled>
                              <el-option label="服务器" value="1" ></el-option>
                              <el-option label="交换机" value="2" ></el-option>
                              <el-option label="防火墙" value="3" ></el-option>
                              <el-option label="单向网闸" value="4" ></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <!--接口-->
                      <!--          <el-row>-->
                      <!--            <el-col :span="6">-->
                      <!--              <el-form-item label="设备类型" prop="type_">-->
                      <!--                <el-input v-model="formData.type_" @change="isShowInfo" disabled style="width: 200px" ></el-input>-->
                      <!--              </el-form-item>-->
                      <!--            </el-col>-->
                      <!--          </el-row>-->
                      <!--agent-->

                      <el-row >
                        <el-col :span="7">
                          <el-form-item label="ip地址" prop="ip">
                            <el-input v-model="formData.ip" style="width: 200px"/>
                          </el-form-item>
                        </el-col>
                        <!--                  <span style="float: right">-->
                        <!--                <el-form-item label="DNS名称" prop="dns">-->
                        <!--                  <el-input v-model="formData.dns" style="width: 200px"/>-->
                        <!--                </el-form-item>-->
                        <!--              </span>-->
                        <!--                  <span>-->
                        <!--                <el-col :span="8">-->
                        <!--                <el-form-item label="连接到" prop="useip">-->
                        <!--                  <el-radio-group v-model="formData.useip">-->
                        <!--                    <el-radio-button label="IP" value="1" style="width:40px;height:40px"></el-radio-button>-->
                        <!--                    <el-radio-button label="DNS" value="0" style="width:40px;height:40px"></el-radio-button>-->
                        <!--                  </el-radio-group>-->
                        <!--                </el-form-item>-->
                        <!--              </el-col>-->
                        <!--              </span>-->
                        <el-col :span="5" :offset="1">
                          <el-form-item label="端口" prop="port">
                            <el-input v-model="formData.port" style="width: 100px"/>
                          </el-form-item>
                        </el-col>

                      </el-row>

                      <!--SNMP-->
                      <div>
                        <el-row v-if="snmpIsShow">
                          <el-col :span="7">
                            <el-form-item label="SNMP版本" prop="version">
                              <el-select v-model="formData.version" style="width: 200px">
                                <el-option value="1" label="SNMPv1" />
                                <el-option value="2" label="SNMPv2" />
                                <el-option value="3" label="SNMPv3" />
                              </el-select>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row v-if="snmpIsShow">
                          <el-col :span="8">
                            <el-form-item label="SNMP社区" prop="community">
                              <el-input v-model="formData.community"  style="width: 200px" />
                            </el-form-item>
                          </el-col>
<!--                          <el-col :span="6">-->
<!--                            <el-checkbox label="使用大量请求" name="bulk" v-model="formData.bulk" :checked="true" true-label="1" false-label="0"></el-checkbox>-->
<!--                          </el-col>-->
                        </el-row>
                      </div>
                      <!--设备群组-->
                      <!--          <el-row>-->
                      <!--            <el-col :span="7">-->
                      <!--              <el-form-item label="设备群组" prop="groupIds">-->
                      <!--                <el-select v-model="formData.groupIds" multiple placeholder="请选择" style="width: 200px">-->
                      <!--                  <el-option-->
                      <!--                      v-for="item in groupOptions"-->
                      <!--                      :key="item.groupid"-->
                      <!--                      :label="item.name"-->
                      <!--                      :value="item.groupid"-->
                      <!--                  />-->
                      <!--                </el-select>-->
                      <!--              </el-form-item>-->
                      <!--            </el-col>-->
                      <!--          </el-row>-->
                      <!--          &lt;!&ndash;templates&ndash;&gt;-->
                      <!--          <el-row>-->
                      <!--            <el-col :span="7">-->
                      <!--              <el-form-item label="模板" prop="templateIds">-->
                      <!--                <el-select v-model="formData.templateIds" multiple placeholder="请选择" style="width: 200px">-->
                      <!--                  <el-option-->
                      <!--                      v-for="item in templateOptions"-->
                      <!--                      :key="item.templateid"-->
                      <!--                      :label="item.host"-->
                      <!--                      :value="item.templateid"-->
                      <!--                  />-->
                      <!--                </el-select>-->
                      <!--              </el-form-item>-->
                      <!--            </el-col>-->
                      <!--          </el-row>-->
                      <!--描述信息-->
                      <el-row>
                        <el-col :span="24">
                          <el-form-item label="描述信息" prop="description">
                            <el-input v-model="formData.description" type="textarea" />
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form>
                  </el-tab-pane>
                </el-tabs>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="resetTabs">取消</el-button>
                  <el-button type="primary" :disabled="activeName=='second'&&JSON.stringify(formData) === formJsonData" @click="activeName=='second'?handleEdit('formData'):handleUserEdit('userInfo')">确定</el-button>
                </div>
              </el-dialog>
            </div>
            <el-dialog
                    title="请输入该主机的账号和密码"
                    :visible.sync="hostSettingdialogVisible"
                    width="30%"
                    @closed="resetInfo"
            >
              <!-- 输入账号 -->
              <el-row>
                <el-col :span="3" style="padding-top: 10px"><label>账号：</label></el-col>
                <el-col :span="20"><el-input v-model="hostAccount" placeholder="请输入账号"></el-input></el-col>
              </el-row>
              <br/>
              <!-- 输入密码 -->
              <el-row>
                <el-col :span="3" style="padding-top: 10px"><label>密码：</label></el-col>
                <el-col :span="20"><el-input v-model="hostPassword" show-password placeholder="请输入密码"></el-input></el-col>
              </el-row>

              <span slot="footer" class="dialog-footer">
                <el-button @click="hostSettingdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="operateway == '0'?postShutdownRequest():postRebootRequest()">确 定</el-button>
            </span>
            </el-dialog>
            <div class="auto-network-search">
              <el-dialog title="发现设备列表"   :visible.sync="autoNetworkFormVisible" align="center" width="1000px" >
                <div>
                  <el-link type="success" :underline="false" icon="el-icon-edit">发现配置</el-link>
                </div>
                <el-table :data="currentPageNetworkAgent" v-loading="networkLoading" height="313px">
                  <el-table-column type="index" align="center" label="序号" width="70" :index="networkIndexMethod"/>
                  <el-table-column prop="hostName" label="设备名称"  align="center" />
                  <el-table-column prop="ip" label="IP地址"  align="center" />
                  <el-table-column label="状态"  align="center">
                    <template slot-scope="scope">
                      <el-tag size="mini"
                              :type="scope.row.hostStatus === 'true' ? 'success' : 'danger' " >
                        {{scope.row.hostStatus === 'true' ?'不存在相同IP设备':'存在相同IP设备'}}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" min-width="100">
                    <template slot-scope="scope">
                      <div>
                        <el-button  type="success" size="mini" icon="el-icon-check" @click="handleCreateByNetworkRule(scope.row)">添加设备</el-button>
                        <!--<div v-if="scope.row.hostStatus === 'true'">-->
                        <!--  <el-button  type="success" size="mini" icon="el-icon-check" @click="handleCreateByNetworkRule(scope.row)">添加设备</el-button>-->
                        <!--</div>-->
                        <!--<div v-if="scope.row.hostStatus === 'false'">-->
                        <!--  <el-button  disabled type="danger" size="mini" icon="el-icon-close">添加设备</el-button>-->
                        <!--</div>-->
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <!--:page-size="pageSize"-->
                <el-pagination
                        :current-page="networkPage.currentPage"
                        :page-size="5"
                        layout="total, prev, pager, next, jumper"
                        :total="networkSearchAgentsTotal"
                        @current-change="network_handleCurrentChange"
                        style="text-align: center"
                />
              </el-dialog>
            </div>
          </div>
        </el-main>
        <vFootSpace />
      </el-container>
    </el-container>
  </el-container>

</template>

<script>
import axios from 'axios'
export default {
  name: 'HostSetting',
  data() {
    return {
      hostType: "0",
      availChoose: "0",
      isSearching:false,
      activeName: 'second',
      tableHeight: 0.748*document.body.clientHeight,
      bulk: true,
      snmpIsShow: false,
      selVal: '',
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的记录数
      total: 0, // 总记录数
      formInline: {
        hostname: '',
        ipAddress: '',
        hgroup: ''
      },
      queryString: '', // 查询host
      name: '',
      dataList: [],
      inventory: [],
      interfaces: [],
      uniqueIP: [],
      dialogFormVisible: false, // 增加表单是否可见
      hostSettingdialogVisible: false,// 主机管理表单
      modifyFormVisible: false, //修改设备表单可见性
      formData: {}, // 添加表单
      userInfo: {
        userName: '',
        password: '',
        hostId: ''
      }, //用户表单
      formJsonData: '',
      // groupOptions: [], // 设备组列表
      // templateOptions: [], // 模板组列表
      loading: true,
      rules: { // 校验规则
        host: [{ required: true, message: '设备名称为必填项', trigger: 'blur' },
              {
               // pattern: /^(?![a-zA-Z]*$)(?![0-9]*$)[a-zA-Z]{1}[a-zA-Z0-9]{5,19}$/,
               pattern: /^[a-zA-Z_\u4e00-\u9fa5]{1}[a-zA-Z0-9_\u4e00-\u9fa5]{5,19}$/,
               // message: '以非数字开头的6-20位字母和数字组合', trigger: 'blur'}],
               message: '非数字开头6-20位中英文、数字、"_"', trigger: 'blur'}],
        // groupIds: [{ required: true, message: '主机群组为必填项', trigger: 'blur' }],
        type: [{ required: true, message: '类型为必填项', trigger: 'blur' }],
        username: [{ required: true, message: '用户名为必填项', trigger: 'blur' },
          {pattern: /^.{1,20}$/,
            message: '长度为1-20位', trigger: 'blur'}],
        password: [{ required: true, message: '密码为必填项', trigger: 'blur' },
          {pattern: /^.{1,30}$/,message: '长度为1-30位'}],
        version: [{ required: true, message: '版本为必填项', trigger: 'blur' }],
        systemType: [{ required: true, message: '系统类型为必选项', trigger: 'blur' }],
        ip: [{ required: true, message: 'IP地址为必填项', trigger: 'blur' },
          {pattern: /^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/,
            message: '非法IP地址', trigger: 'blur'}],
        useip: [{ required: true, message: '连接为必填项', trigger: 'blur' }],
        community: [{ required: true, message: '社区为必填项', trigger: 'blur' },
          {pattern: /^.{1,32}$/,
            message: '长度为1-32位', trigger: 'blur'}],
        port: [{ required: true, message: '端口为必填项', trigger: 'blur' },
          {pattern: /^([1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-4])$/, message: '非法的端口号', trigger: 'blur'}],
        description: [{required: false ,trigger: 'blur',type: 'string'},
          {pattern: /^.{0,2048}$/m,message: '长度为0-2048位'}],
        userName: [{required: true, message: '用户名为必填项',trigger: 'blur'},
          {pattern: /^\w{1,20}$/, message: '只支持大小写字母和数字，且长度为1-20'}],
      },
      hostAccount: "",//主机账户
      hostPassword: "", //主机密码
      operateId: "",
      operateway: "0",
      currentType: '',
      pageNum: 10, // 每页展示多少数据
      autoNetworkFormVisible: false, // 发现设备页面可见性
      networkSearchAgents: [], //网络发现设备列表
      networkSearchAgentsTotal:  0, //发现设备总数
      networkLoading: true,
      networkPage: {
        currentPage: 1,
        pageSize: 5
      },
      flags: false  // 根据flags判断输入文本的类型
    }
  },
  // 钩子函数，VUE对象初始化完成后自动执行
  mounted() {
    this.findAllHost()// VUE对象初始化完成后调用分页查询方法，完成分页查询
  },
  computed: {
    // 计算当页的触发器
    currentPageNetworkAgent: function () {
      let start = (this.networkPage.currentPage - 1) * this.networkPage.pageSize
      let end = start + this.networkPage.pageSize
      if (end >= this.networkSearchAgents.length)
        end = this.networkSearchAgents.length
      //截取字符串
      return this.networkSearchAgents.slice(start, end);
    },
    // 设置密码框类型
    showType() {
      return this.flags ? 'text' : 'password'
    },
  },
  //
  methods: {
    // handleClick(tab, event) {
    //   console.log(this.activeName);
    // },
    filterClick(){
      this.loading = true
      this.currentPage = 1;
      this.$axios({
        method: 'get',
        url: '/host/getAllHosts.action',
        params: {
          pageSize: this.pageSize,
          currentPage: this.currentPage,
          type: this.hostType,
          avail: this.availChoose,
          queryString: this.queryString
        }
      }).then((res) =>{
        // console.log(res)
        this.dataList = res.data.content.hosts
        this.inventory = res.data.content.inventory
        this.total = res.data.content.total
        this.interfaces = res.data.content.interfaces
        this.loading = false
      });
    },
    resetTabs() {
      this.modifyFormVisible = false
      this.activeName = 'second'
      this.resetValidate()
    },
    // filterHostType (value, row){
    //     return row.type_ === value
    // },
    filterHandler(value, row) {
      console.log(value);
      if (row.available === '1' || row.snmp_available === '1')
        return row.available === value || row.snmp_available === '1'
      else
        return row.available === value || row.snmp_available === value
    },
    // 筛选设备类型
    TypefilterHandler(value, row) {
      if (value === '主机')
        return row.available === '1' || row.available === '2'
      else
        return row.snmp_available === '1' || row.snmp_available === '2'
    },
    isShowInfo(selVal) {
      this.selVal = selVal;
      this.snmpIsShow = selVal !== '1'

      // 修改设备默认端口
      if(this.formData.type === '1'){
        this.formData.port = '10050'
      }else {
        this.formData.port = '161'
      }

      //清楚标签页切换的告警信息,具体清楚某一个产生的告警信息，在数组里面添加rules的规则即可
      //   this.$refs.formData.clearValidate(['username', 'password']);
      //数组为空，则代表全部都清楚
      this.$refs.formData.clearValidate([]);
    },
    handleInput() {
      return this.dataList.filter(item => item.host.includes(this.queryString) || item.hostid.includes(this.queryString))
    },
    findHost() {
      axios.get('/host/getHostByName?name=' + this.name).then((res) => {
        if (res.data.flag) { // 执行成功
          this.dataList = res.data.data
          // 弹出提示信息
          this.$message({
            message: res.data.message,
            type: 'success'
          })
        } else { // 执行失败
          // 弹出提示
          this.$message.error(res.data.message)
        }
      })
    },
    //重启主机时关闭对话框重置表单
    resetInfo() {
      this.hostAccount = ""
      this.hostPassword = ""
    },
    //重置校验
    resetValidate() {
      if (this.$refs['formData'] !== undefined) {
        this.$refs['formData'].resetFields();
      }
      if (this.$refs['userInfo'] !== undefined) {
        this.$refs['userInfo'].resetFields();
      }
    },
    // 重置表单
    resetForm() {
      this.snmpIsShow = false;
      this.formData = {
        hostid: '',
        host: '',
        type: '1',
        bulk: '1',
        community: '{$SNMP_COMMUNITY}',
        dns: '',
        // groupIds: [],
        ip: '',
        port: '10050',
        // templateIds: [],
        useip: 'IP',
        version: '2',
        description: '',
        systemType: '1',
        hostType: '',
        cpuType: '',
        memory: ''
      }// 重置数据
    },
    // 弹出添加窗口
    handleCreate() {
      //查询所有的设备组和模板
      // this.findAllGroups()
      // this.findAllTemplates()
      // 弹出新增窗口
      this.dialogFormVisible = true
      //重置校验
      this.resetValidate()
      //重置表单
      this.resetForm()
    },
    //自动发现设备弹出添加窗口
    handleCreateByNetworkRule(val) {
      console.log(val)
      // 弹出新增窗口
      this.dialogFormVisible = true
      //重置校验
      this.resetValidate()
      //重置表单
      this.resetForm()
      // 设置自动填写数据
      if (val.sysType === 'Windows' || val.sysType === 'Linux'){
        this.formData.type = '1'
        this.formData.port = '10050'
        if (val.sysType === 'Windows'){
          this.formData.systemType = '2'
        }else{
          this.formData.systemType = '1'
        }
        this.snmpIsShow = false;
      }else if(val.sysType === 'SNMP'){
        this.snmpIsShow = true;
        this.formData.type = '2'
        this.formData.port = '161'
        this.formData.community = val.snmpCommunity
      }
      this.formData.host = val.hostName
      this.formData.ip = val.ip
    },
    hanldMulCreate(){
      this.$router.push({path: '/addTable'});
    },

    findAllHost() {
      axios.get('/host/getAllHosts.action?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize+'&type='+this.hostType+'&avail='+this.availChoose+'&queryString='+this.queryString).then((res) => {
        // 解析Controller响应回的数据，为模型数据赋值
        this.dataList = res.data.content.hosts
        this.inventory = res.data.content.inventory
        this.total = res.data.content.total
        this.interfaces = res.data.content.interfaces
        this.loading = false
      })
    },
    //关闭主机
    shutdownHost(hostId) {
      this.$confirm('是否确认关闭主机', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get('host/getUserInfo.action?hostid=' + hostId).then((res) => {
          //console.log(res.data)
          if (res.data.status) {
            this.hostAccount = res.data.content.username
            this.hostPassword = res.data.content.password
            this.operateway = "0"
            this.hostSettingdialogVisible = true;    // 显示对话框
            this.operateId = hostId  // 赋值要操作的ID
          } else {
            this.$message({
              type: 'error',
              message: '该用户未设置用户名与密码，请前往设置'
            });
          }
        }).catch(() => {
          console.error(res.data)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消关闭'
        });
      });
    },
    //重启主机
    restartHost(hostId) {
      this.$confirm('是否确认重启主机', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get('host/getUserInfo.action?hostid=' + hostId).then((res) => {
          //console.log(res.data)
          if (res.data.status) {
            this.hostAccount = res.data.content.username
            this.hostPassword = res.data.content.password
            this.operateway = "0"
            this.hostSettingdialogVisible = true;    // 显示对话框
            this.operateId = hostId  // 赋值要操作的ID
          } else {
            this.$message({
              type: 'error',
              message: '该用户未设置用户名与密码，请前往修改页面'
            });
          }
        }).catch(() => {
          console.error(res.data)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重启'
        });
      });
    },
    postShutdownRequest() {
      const loading = this.$loading({
        lock: true,
        text: '正在处理',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      axios({
        method: 'get',
        url: '/host_management/send_shutdown_to_host.action',
        params: {
          hostId: this.operateId,//
          account: this.hostAccount,
          password: this.hostPassword
        }
      }).then((res) => {
        console.log(res.data)
        loading.close();
        this.hostSettingdialogVisible = false;
        this.$message({
          type: 'success',
          message: '关闭成功'
        });
      })
    },
    postRebootRequest() {
      let _this = this;
      // 设置正在处理，让用户有所感知
      const loading = this.$loading({
        lock: true,
        text: '正在处理',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      axios({
        method: 'get',
        url: '/host_management/send_reboot_to_host.action',
        params: {
          hostId: _this.operateId,//
          account: _this.hostAccount,
          password: _this.hostPassword
        }
      }).then((res) => {
        loading.close();
        this.hostSettingdialogVisible = false;
        this.$message({
          type: 'error',
          message: '重启失败，目标主机尚不支持重启或账号密码错误'
        });
      })
    },

    // 切换页码
    handleCurrentChange(currentPage) {
      this.loading = true;
      // 设置最新的页码
      this.currentPage = currentPage
      // 重新调用findPage方法进行分页查询
      this.findAllHost()
    },
    // 添加设备
    handleAdd(formData) {
      this.isSearching=true;
      this.$refs[formData].validate((valid) => {
        if (valid) {
          axios.post('/host/createHost.action', this.formData).then((res) => {
            if (res.data.status) { // 执行成功
              // 关闭新增窗口
              this.dialogFormVisible = false
              // 新增成功后，重新调用分页查询方法，查询出最新的数据
              this.findAllHost()
              // 弹出提示信息
              this.isSearching=false;
              this.$message({
                message: res.data.content.message,
                type: 'success'
              })
            } else { // 执行失败
              // 弹出提示
              this.isSearching = false;
              this.$message.error(res.data.content.message);

            }
          })
        } else {
          this.isSearching=false;
          return false;
        }
      });
    },
    prepareEdit(hostid,val) {
      //修改设备前准备
      //查询所有的设备组和模板
      // this.findAllGroups()
      // this.findAllTemplates()
      //重置校验
      this.resetValidate()
      //重置表单
      this.resetForm()
      this.formData.type = val
      axios.get('/host/getHostByHostid.action?hostid=' + hostid).then((res) => {
        if (res.data.status) { // 执行成功，获取选定修改设备的原信息
          this.formData.host = res.data.content.host
          this.formData.hostid = hostid
          // this.formData.type = res.data.content.interfaces[0].type
          this.formData.ip = res.data.content.interfaces[0].ip
          this.formData.port = res.data.content.interfaces[0].port
          this.formData.dns = res.data.content.interfaces[0].dns
          this.userInfo.userName = res.data.content.username    //用户名
          this.userInfo.password = res.data.content.password    //密码
          this.userInfo.hostId = hostid  // 设备id
          this.formData.useip = res.data.content.interfaces[0].useip === '1' ? 'IP' : 'DNS'
          if (this.formData.type !== '1') {
            this.snmpIsShow = true;
            // this.formData.bulk = res.data.content.interfaces[0].details.bulk
            this.formData.community = res.data.content.interfaces[0].details.community
            this.formData.version = res.data.content.interfaces[0].details.version
          } else {
            this.snmpIsShow = false;
          }
          // let i = 0;
          // const gList = []
          // const tList = []
          // for(i = 0; i<res.data.content.groups.length; i++)
          //   gList[i] = res.data.content.groups[i].groupid
          // this.formData.groupIds = gList
          // for(i = 0; i<res.data.content.parentTemplates.length; i++)
          //   tList[i] = res.data.content.parentTemplates[i].templateid
          // this.formData.templateIds = tList
          this.formData.description = res.data.content.description === undefined ? '' : res.data.content.description
          //记录初始的表单数据
          this.formJsonData = JSON.stringify(this.formData)
        }
      })
      //显示修改设备弹窗
      this.modifyFormVisible = true
    },
    handleEdit(formData) {
      // ---------修改设备
      this.$refs[formData].validate((valid) => {
        if (valid) {
          axios.post('/host/updateHost.action', this.formData).then((res) => {
            if (res.data.status) {
              this.findAllHost()
              this.$message({
                message: res.data.content.message,
                type: 'success'
              })
            } else {
              this.$message.error(res.data.content.message)
            }
          })
          this.modifyFormVisible = false
        } else {
          return false;
        }
      });
    },
    handleUserEdit(userInfo) {
      this.$refs[userInfo].validate((valid) => {
        if (valid) {
          // console.log(this.userInfo.hostid)
          axios.post('/host/updateUser.action', this.userInfo).then((res) => {
            if (res.data.status) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            } else {
              this.$message.error('修改失败')
            }
          })
          this.modifyFormVisible = false
        } else {
          return false;
        }
      })
      // 修改用户信息后，重置dialog
      this.resetTabs()
    },
    promptDelete(hostid, host) {
      this.$confirm('此操作将删除设备 ' + host + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(hostid, host)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleDelete(hostid, host) {
      // ---------删除功能
      axios.get('/host/deleteHost.action?hostid=' + hostid + '&name='+ host, this.formData).then(res => {
        let status = res.data.status
        if (status) {
          //删除成功
          // let index = 0;
          // for (; index < this.dataList.length; index++) {
          //   if (this.dataList[index].hostid === hostid)
          //     break;
          // }
          // //从列表里移除
          // this.dataList.splice(index, 1)
          this.findAllHost();
          //打印消息
          this.$message({
            message: res.data.content.message,
            type: 'success'
          })
        } else {
          //删除失败
          this.$message.error(res.data.content.message)
        }
      })
    },
    timeoutTip: function (row) {
      for (let i = 0; i < this.interfaces.length; i++) {
        let inter = this.interfaces[i]
        if (row.hostid === Object.keys(inter)[0]) {
          return '连接' + inter[row.hostid] + '超时'
        }
      }
    },
    ifAgentAvail(val) {
      if (val.available === '1') {
        return 'hostAvailable'
      }else if(val.available === '2'){
        return 'hostAvailable'
      }else{
        return 'hostDefault'
      }
    },
    ifSwitchAvail(val) {
      let type = val.hostInventory.inventory.notes
      if ((val.available !== '1') && (val.available !== '2') && ((type === undefined) || (type === 'switch'))) {
        return 'hostAvailable'
      }else{
        return 'hostDefault'
      }
    },
    ifFirewallAvail(val) {
      let type = val.hostInventory.inventory.notes
      if (type === 'firewall') {
        return 'hostAvailable'
      }else{
        return "hostDefault"
      }
    },
    ifSinglegateAvail(val) {
      let type = val.hostInventory.inventory.notes
      if (type === 'single_gate') {
        return 'hostAvailable'
      }else{
        return "hostDefault"
      }
    },
    info(val) {
      console.log(val.hostInventory.inventory.notes);
    },
    isType(val) {
      if(this.ifAgentAvail(val) == 'hostAvailable') {
        return '1'
      }else if (this.ifSwitchAvail(val) == 'hostAvailable') {
        return '2'
      }else if (this.ifFirewallAvail(val) == 'hostAvailable') {
        return '3'
      }else if (this.ifSinglegateAvail(val) == 'hostAvailable'){
        return '4'
      }else {
        return '0'
      }
    },
    // 序号连续
    indexMethod(index) {
      return index + (this.currentPage-1) * this.pageSize + 1;
    },
    // 网络设备页面序号连续
    networkIndexMethod(index) {
      return index + (this.networkPage.currentPage-1) * this.networkPage.pageSize + 1;
    },
    //分页页面数量改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.findAllHost();
    },
    // 点击发现设备
    handleNetworkSearch(){
      // this.autoNetworkFormVisible = true
      // this.$axios.get('/networkSearch/getAllNetworkAgents.action').then(res =>{
      //   if (res.data.status){
      //     this.networkSearchAgents = res.data.content.content
      //     this.networkSearchAgentsTotal = this.networkSearchAgents.length
      //     this.networkLoading = false
      //     console.log(this.networkSearchAgents)
      //   }else{
      //     this.$message.warning("暂未发现设备")
      //   }
      // })

      this.$router.push({path: '/networkSearchList'})
    },
    // 发现网络设备分页
    network_handleCurrentChange(currentPage){
      // 设置最新的页码
      this.networkPage.currentPage = currentPage
    },
    //
  }
}
</script>
<style scoped>
  .main{
    height: 89vh;
    width: 100%;
    margin-top: 60px;
    padding:0 10px 10px 10px;
  }
  .hostAvailable{
    background-color: green;
  }

  .content{
    margin-top: 0;
    width: 100%;
    overflow-x:hidden
  }

  .buttonText{
    color: #2ac06d;
  }
  .itemInfo-middle-type{
    display: inline;
    line-height: 50px;
  }
  .itemInfo-middle-type div{
    display: inline;
    padding-left: 5px;
    padding-right: 5px;
    height: 30px;
    line-height: 50px;
    color: #d9d9d9;
    border-top: 1px solid #d9d9d9;
    border-left: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
  }
  .itemInfo-middle-type-last{
    border-right: 1px solid #d9d9d9;
  }
  .eye {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 24px;
    height: 24px;
  }
</style>
